<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 计算属性</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div id="app">
            <!-- 使用计算属性 -->
            <p>User status (computed): {{ userStatusMessage }}</p>
    
            <!-- 使用方法 -->
            <p>User status (method): {{ calculateUserStatus() }}</p>
        </div>
    
        
    </div>

    <script>
        const { createApp, ref, computed } = Vue;

        createApp({
            setup() {
                const user = ref({ loginCount: 5 });

                // 计算属性
                const userStatusMessage = computed(() => {
                    return user.value.loginCount > 0 ? 'Active' : 'Inactive';
                });

                // 普通方法
                function calculateUserStatus() {
                    return user.value.loginCount > 0 ? 'Active' : 'Inactive';
                }

                return { userStatusMessage, calculateUserStatus };
            }
        }).mount('#app');
    </script>
</body>
</html>
